<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
     <div id="app">
          <h1>我们的学校是{{info.a}}</h1>
          <button @click="changeName">点击按钮修改学校的名字</button>
     </div>
</body>
</html>
<script>
    //创建VM
    let VM = new Vue({
         el:"#app",
         data:{
             names:"尚硅谷",
             //右侧的V是对象写法
             info:{
                a:"尚硅谷"
             }
         },
         methods: {
             //回调
             changeName(){
                 //修改VM数据
                 this.info.a = 'atguigu';
             }
         },
    });
    //VM是Vue类的一个实例
    console.log(VM);
    console.log(VM._data);
    //响应式数据中如果出现对象，Vue框架通过Object.defineProperty进行检测，
    //能检测到数据变化，数据变化，视图跟着变化。
    

</script>